<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>3.路由传值</title>
  <script src="../../js/vue.js"></script>
  <script src="../../js/vue-router.js"></script>

  <style>
    .active-class {
      background-color: cyan;
    }
  </style>
</head>
<body>
  <!--
  1.Vue Router传递参数
  只要将Vue Router挂载到了Vue实例对象上, 我们就可以通过vue.$route拿到路由对象
  只要能拿到路由对象, 就可以通过路由对象拿到传递的参数

  方式一: 通过URL参数参数(?key=value&key=value), 通过this.$route.query获取
  方式二: 通过占位符传递(路由规则中/:key/:key, 路径中/value/value), 通过this.$route.params获取
  -->
  <!--这里就是MVVM中的View-->
  <div id="app">
      <!--
      第一种传递参数的方式: 通过URL参数的方式传递
      在指定HASH的时候, 通过?key=value&key=value的方式传递
      在传递的组件的生命周期方法中通过 this.$route.query的方式来获取
      -->
      <router-link to="/one?id=1235" tag="button">模板一</router-link>
      <!--
        第二种传递参数的方式: 通过路由规则中的占位符传递
        在指定路由规则的时候通过/:key/:key的方式来指定占位符
        在指定HASH的时候, 通过/value/value的方式来传递值
        在传递的组件的生命周期方法中通过 this.$route.params的方式来获取
      -->
      <router-link to="/two" tag="button">模板二</router-link>

      <router-view></router-view>
  </div>
  <template id="one">
    <div>
      <p>这是组件一</p>
      <p>{{this.msg}}</p>
    </div>
  </template>
  <template id="two">
    <div>
      <p>这是组件二</p>
    </div>
  </template>
</body>
<script type="text/javascript">

  const one = {
    template:'#one',
    data: function () {
      return {
        msg:'123'
      }
    },
    created: function () {
      // 获取路由中的数据
      this.msg = this.$route.query.id
      console.log(this.$route.query.id)
    }
  }
  const two = {
    template: '#two'
  }
  const routes = [
    {path:'/' , redirect:'/one'},
    {path:'/one',component:one},
    {path:'/two',component:two}
  ]
  const router = new VueRouter({
    routes:routes,
    linkActiveClass:'active-class'
  })



  let vue = new Vue({
    el:'#app',
    router:router,
    data: {

    },

    components : {
      one:one,
      two:two
    }
  })

  console.log(vue.$route)
</script>
</html>